<template>
	<view class="content padd">
		<view v-if="!isRecord" class="NoDataView">
			<image src="../../../static/image/detection/historyReport/img_noData.png" style="width: 364rpx;height: 327rpx;"></image>
			<text>暂无数据</text>
		</view>
		<view v-else class="CardItem" v-for="(item,index) in useInfoList" :key = "index">
			<!-- body content -->
			<view class="Card_Content">
				<view class="Card_Content_T" style="position: relative;">
					<view class="frontLine"></view>
					<text class="Tname">{{item.userNeckName}}</text>
					<text class="Tdate">{{item.start.slice(0,10)}}</text>
				</view>
				<view class="Card_Content_T" style="margin-top: 30rpx;">
					<text class="Ttime">{{item.start.slice(11,16)}}</text>
					<text class="Ttype">{{item.type}}</text>
					<text class="Tcount">{{item.time}}分钟</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRecord:true, //是否有使用记录
				useInfoList:[],
			}
		},
		onLoad(option) {
			console.log(option);
			if(option.useInfoList != null || option.useInfoList != undefined){
				let useInfoList = JSON.parse(option.useInfoList);
				if(useInfoList.length == 0){
					this.isRecord = false;
					return;
				}
				useInfoList.forEach((item,index) =>{
					if(item.type == "deepMonitor") item.type = "深度监测";
					if(item.type == "fastCheck") item.type = "快速检测";
				});
				this.useInfoList = useInfoList.reverse();
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page {
	background-color: #fafafa;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.padd{
	padding-bottom: 50rpx;
}
.CardItem{
	margin-top: 24rpx;
	width: 700rpx;
	height: 195rpx;
	background-color: #FFFFFF;
	border-radius: 15px;
	display: flex;
	align-items: center;
}
.Card_Content{
	margin-left: 74rpx;
	margin-right: 40rpx;
	width: 575rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.Card_Content_T{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* line */
.frontLine{
	position: absolute;
	left: -22rpx;
	width: 10rpx;
	height: 40rpx;
	background-color: #0659C7;
	border-radius: 15px;
}
.Tname{
	font-size: 36rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #000000;
}
.Tdate{
	font-size: 28rpx;
	font-family: Roboto;
	font-weight: bold;
	color: #333333;
}
.Ttime{
	font-size: 40rpx;
	font-family: Roboto;
	font-weight: bold;
	color: #333333;
}
.Ttype{
	font-size: 34rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #000000;
}
.Tcount{
	font-size: 34rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #333333;
}
.NoDataView {
	width: 750rpx;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.NoDataView text {
	margin-top: 40rpx;
	font-size: 32rpx;
	font-family: Source Han Sans SC;
	font-weight: normal;
	color: #999999;
}
</style>
